import React from 'react'
import { NavWrap } from './StyleHomePage'
import { useHistory } from 'react-router-dom'

import Nav_1 from '@a/images/home/nav_1.png'
import Nav_2 from '@a/images/home/nav_2.png'
import Nav_3 from '@a/images/home/nav_3.png'
import Nav_4 from '@a/images/home/nav_4.png'
import Nav_5 from '@a/images/home/nav_5.png'
import Nav_6 from '@a/images/home/nav_6.png'
import Nav_7 from '@a/images/home/nav_7.png'
import Nav_8 from '@a/images/home/nav_8.png'

const Nav = () => {
    let history = useHistory()
    return (
        <NavWrap>
            <ul>
                <li onClick={() => { history.push('/notice')
                 }}>
                        <div 
                            className="nav"
                            style={{backgroundColor:'#15b0f1'}}
                        >
                            <img src={`${Nav_1}`} alt=""/>
                        </div>
                    <span>通知</span>
                    </li>
                    <li>
                        <div className="nav"
                            style={{backgroundColor:'#808df4'}}
                        >
                            <img src={`${Nav_2}`} alt=""/>
                        </div>
                        <span>课堂评价</span>
                    </li>
                    <li
                    onClick={()=> { history.push('/dklist') }}
                    >
                        <div className="nav"
                            style={{backgroundColor:'#ff8e95'}}
                        >
                            <img src={`${Nav_3}`} alt=""/>
                        </div>
                        <span>打卡活动</span>
                    </li>
                    <li>
                        <div className="nav"
                            style={{backgroundColor:'#ff7671'}}
                            onClick={()=>{history.push('/album')}}
                        >
                            <img src={`${Nav_4}`} alt=""/>
                        </div>
                        <span>班级相册</span>
                    </li>
                    <li>
                        <div className="nav"
                            style={{backgroundColor:'#0fb7bf'}}
                            onClick={ ()=>history.push('/lesson')}
                        >
                            <img src={`${Nav_5}`} alt=""/>
                        </div>
                        <span>备课</span>
                    </li>
                    <li>
                        <div className="nav"
                            style={{backgroundColor:'#fdbe5b'}}
                            onClick={() => history.push('/eduhlep')}
                        >
                            <img src={`${Nav_6}`} alt=""/>
                        </div>
                        <span>教学拓展</span>
                    </li>
                    <li
                    onClick={ ()=>history.push('/window')}
                    >
                        <div className="nav"
                            style={{backgroundColor:'#6dcbe5'}}
                        >
                            <img src={`${Nav_7}`} alt=""/>
                        </div>
                        <span>讨论组</span>
                    </li>
                    <li>
                        <div className="nav"
                            style={{backgroundColor:'#6eceaa'}}
                            onClick={ ()=>history.push('/survey')}
                        >
                            <img src={`${Nav_8}`} alt=""/>
                        </div>
                        <span>调查</span>
                    </li>
                    
                </ul>
        </NavWrap>
    )
}

export default Nav